import React, { Component } from 'react';
import axios from 'axios'
import { Button } from 'antd';
import MyNavLink from '../../components/MyNavLink'
import {
  HeartOutlined,
  DownloadOutlined,
  CaretRightOutlined,
  PlusOutlined
} from '@ant-design/icons';
import './index.css'
export default class index extends Component {
  state = {
    tracks: [],
    data: ''
  }
  componentDidMount() {
    // 获取url地址并截取id
    var test = window.location.href.split('/').pop()
    // 发送请求
    axios.get(`http://iwenwiki.com:3000/playlist/detail?id=${test}`).then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ tracks: response.data.playlist.tracks })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )
    // 获取当前日期
    var myDate = new Date();
    this.setState({data:myDate.getDate()})
  }
  render() {
    const newTracks = this.state.tracks
    return (
      <div className='musiclist'>
        <div className='musiclistheader'>
          <div>
            <div className='data'>{this.state.data}</div>
            <div className='title'>
              <h2>每日歌曲推荐</h2>
              <p>根据你的音乐口味生成，每日6:00更新</p>
            </div>
          </div>
          <Button type="primary" shape="round">
            <CaretRightOutlined />
            播放全部
          </Button>
          <Button shape="round" type='ghost'>
            <PlusOutlined />
            收藏全部
          </Button>
        </div>
        {
          newTracks.map(item => {
            return (
              <MyNavLink to={`/player/${item.id}`} className="list" key={item.id}>
                <div className="portrait"><img src={item.al.picUrl} alt="头像" /></div>
                <div className="details">
                  <div className="song">{item.name}</div>
                  <div className="singer">{item.al.name}</div>
                </div>
                <div className="icon"><HeartOutlined className='love' /><DownloadOutlined className='love' /></div>
              </MyNavLink>
            )
          })
        }
      </div>
    );
  }
}


